<template>
  <div class="register-box">
    <van-nav-bar title="注册" left-arrow  left-text="返回" @click-left="onClickLeft" />
    <van-form @submit="onSubmit">
      <van-field
        v-model="obj.id"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="obj.password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <van-field
        v-model="obj.phone"
        name="手机号"
        label="手机号"
        placeholder="手机号"
        :rules="[
          { required: true, message: '请填写手机号' },
          { pattern: /^1[3-9]{1}[0-9]{9}$/, message: '请填写正确手机号' },
        ]"
      />
      <van-field name="radio" label="性别" >
        <template #input>
          <van-radio-group v-model="obj.sex" direction="horizontal">
            <van-radio name="男">男</van-radio>
            <van-radio name="女">女</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field
        v-model="obj.email"
        name="邮箱"
        label="邮箱"
        placeholder="邮箱"
        :rules="[{ required: true, message: '请填写邮箱' }]"
      />
      <div class="xb" style="margin: 16px">
        <van-button  block type="info" color="#1989FA" native-type="submit"
          >注册</van-button
        >
      </div>
    </van-form>
  </div>
</template>
<script>
import { registerApi } from "../../apis/register";
export default {
  data() {
    return {
      obj: {
        id: "",
        name: "",
        password: "",
        photo: "",
        sex: "",
        address: "",
        birthday: "",
        phone: "",
        email: "",
        remark: "",
      },
    };
  },
  methods: {
    async onSubmit() {
      this.obj.name = this.obj.id;
      let res = await registerApi(this.obj);
      if (res.code !== 200) {
        this.$toast({
          message: "注册失败请重新注册",
          position: "bottom",
        });
        return;
      }
      this.$toast({
          message: "注册成功",
          position: "bottom",
        });
      this.$router.push("/login");
    },
    onClickLeft(){
        this.$router.go('-1')
    }
  },
};
</script>
<style lang="less" scoped>
.register-box {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  background: #fefefe;
  .van-cell{
    margin: 15px 0;
  }
}
</style>